import React, { useEffect, useState } from 'react';
import style from './list.module.less';
import { Table, Button, Pagination } from 'antd';
import { getgoods } from "@/api/account";
import { serverUrl } from "@/utils/comment";

const columns = [
  { title: '商品名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '商品分类', dataIndex: 'category', key: 'category', width: 120 },
  { title: '商品价格', dataIndex: 'price', key: 'price', width: 100 },
  {
    title: '商品图片',
    dataIndex: 'imgUrl',
    key: 'imgUrl',
    width: 100,
    render: (text) => <img src={text} alt="商品图片" style={{ maxWidth: '100%' }} />,
  },
  { title: '商品描述', dataIndex: 'goodsDesc', key: 'goodsDesc', width: 200 },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    width: 150,
    render: () => (
      <>
        <Button type="primary" size="small" style={{ marginRight: 8 }}>确认</Button>
        <Button type="default" size="small">取消</Button>
      </>
    ),
  },
];

export default function List() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [tableData, setTableData] = useState([]);

  // 获取商品列表数据
  const getlist = async (params) => {
    try {
      const response = await getgoods(params);
      const newData = response.data.map((item) => ({
        ...item,
        imgUrl: `${serverUrl}${item.imgUrl}`,
      }));
      setTableData(newData);
    } catch (error) {
      console.error('获取商品列表失败:', error);
    }
  };

  useEffect(() => {
    const params = {
      currentPage: page,
      pageSize: pageSize,
    };
    getlist(params);
  }, [page, pageSize]);

  return (
    <div>
      <div className={style.title}>
        商品列表
      </div>
      <Table
        pagination={false}
        style={{ height: 550, overflow: 'auto' }}
        columns={columns}
        expandable={{
          expandedRowRender: record => <p style={{ margin: 0 }}>{record.id}</p>,
          rowExpandable: record => record.description !== '',
        }}
        dataSource={tableData}
      />
      <Pagination
        total={85}
        showSizeChanger
        showQuickJumper
        showTotal={total => `总共 ${total} 条`}
        onChange={(pageNumber) => {
          setPage(pageNumber);
        }}
        onShowSizeChange={(current, size) => {
          setPage(1);
          setPageSize(size);
        }}
      />
    </div>
  );
}
    